﻿import QtQuick 2.10
import QtQuick.Controls 1.4
//import QtQuick.Controls 2.3
import QtQuick.Layouts 1.2
import QtDream.Core 3.2
import QtDream.Controls 1.9

Page
{
    id: page
    implicitWidth: 270
    implicitHeight: 480

    Component.onCompleted: {
    }

    //菜单
    menuBar: MenuBar
    {
        Menu
        {
            title: qsTr( "测试菜单" ) + Translator.notifier

            MenuItem {
                text: "子菜单"
                iconName: "new"
                iconSource: "new.png"
                onTriggered: {
                    console.log("click " + text)
                }
            }
        }
    }

//    header: ToolBar {
//        RowLayout{
//            anchors.fill: parent
//            ToolButton {
//                iconSource: "new.png"
//                onClicked: {
//                    console.log("new.png click")
//                }
//            }
//        }
//    }

    //主界面
    Item{
        id: item
        width: parent.width
        height: parent.height-20
        y: 20

        //背景 纯色
        Rectangle{
            anchors.fill: parent
            color: "black"
            opacity: 1
        }
        //背景 图片
        Image{
            anchors.fill: parent
            fillMode: Image.Stretch
            source: "bg.png"
        }

        //组件
        Grid{
            id: column
            BusyIndicator{
                id: busyIndicator
                running: true
            }
            Button{
                id: button
                text: "button on"
                onClicked: {
                    text = text=="button on"?"button off":"button on"
                    busyIndicator.running = !busyIndicator.running
                }
            }


            Column {
                CheckBox {
                    text: qsTr("red")
                    checked: true
                    onClicked: {
                        console.log("red select state:" + checked )
                    }
                }
                CheckBox {
                    text: qsTr("green")
                    onClicked: {
                        console.log("green select  state:" + checked )
                    }
                }
                CheckBox {
                    text: qsTr("blue")
                    onClicked: {
                        console.log("blue select  state:" + checked )
                    }
                }
            }

            ComboBox {
                id: comboBox
                currentIndex: 2
                model: ListModel {
                    id: cbItems
                    ListElement { text: "Banana"; color: "Yellow" }
                    ListElement { text: "Apple"; color: "Green" }
                    ListElement { text: "Coconut"; color: "Brown" }
                }
                width: 200
                onCurrentIndexChanged: console.log(cbItems.get(currentIndex).text + ", " + cbItems.get(currentIndex).color)
            }

            GroupBox {
                id: groupBox1
                title: "ComboBox"

                Column {
                    spacing: 10

                    CheckBox {
                        text: "Breakfast"
                        checked: true
                    }
                    CheckBox {
                        text: "Lunch"
                        checked: false
                    }
                    CheckBox {
                        text: "Dinner"
                        checked: true
                    }
                }
            }

            GroupBox {
                id: groupBox2
                title: "RadioButton"

                ColumnLayout {
                    ExclusiveGroup { id: tabPositionGroup }
                    RadioButton {
                        text: "Top"
                        checked: true
                        exclusiveGroup: tabPositionGroup
                        onClicked: {
                            console.log("Top select  state:" + checked )
                        }
                    }
                    RadioButton {
                        text: "Bottom"
                        exclusiveGroup: tabPositionGroup
                        onClicked: {
                            console.log("Bottom select  state:" + checked )
                        }
                    }
                }
            }

            Column {
                ProgressBar {
                    id: progressBar
                    value: 0.0
                    maximumValue: 100.0
                    minimumValue: 0.0
                }
                ProgressBar {
                    indeterminate: true
                }
            }

            Column{
                Slider{
                    id: slider
                    value: 0.0
                    stepSize: 1.0
                    maximumValue: 100.0
                    minimumValue: 0.0
                    onValueChanged: {
                        progressBar.value = value
                    }
                }
                Text{
                    id: sliderText
                    text: "Slider Value: "+Number(slider.value)
                }
            }

            Column{
                SpinBox{
                    id: spinbox1
                    stepSize: 1.0
                }
            }

            Column {
                Switch { checked: true }
                Switch { checked: false }
            }

            TextArea {
                width: 240
                text:
                    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, " +
                    "sed do eiusmod tempor incididunt ut labore et dolore magna " +
                    "aliqua. Ut enim ad minim veniam, quis nostrud exercitation " +
                    "ullamco laboris nisi ut aliquip ex ea commodo cosnsequat. ";
            }

            TextField {
                placeholderText: qsTr("Enter name")
            }

            Calendar {
                id: calendar
                implicitWidth: 250
                implicitHeight: 250
                minimumDate: new Date(2017, 0, 1)
                maximumDate: new Date(2019, 0, 1)
                onClicked: {
                    console.log(date,date.toLocaleString(Qt.locale("de_DE"),"yyyy.MM.dd hh:mm:ss.zzz"))
                    label.text = String(date)
                }
            }

            Label{
                id: label
                text: ""
            }
        }
    }


}
